<template>
  <u-popup
    :show="show"
    mode="center"
    round="12"
    :closeable="true"
    @close="close"
    :safeAreaInsetBottom="false"
  >
    <view class="level-popup">
      <!-- 顶部标题栏 -->
      <view class="popup-header">
        <text class="popup-title">等级</text>
        <!-- <u-icon name="close" color="#999" size="20" @click="close"></u-icon> -->
      </view>

      <!-- 等级任务 -->
      <view class="section">
        <view class="section-title">
          <image
            :src="IMAGE_URL+'/static/user/dj1.png'"
            style="width: 28rpx; height: 28rpx; margin-right: 6rpx"
          />
          <text>等级任务</text>
        </view>
        <view class="task-list">
          <view class="task-item">
            <text class="task-text">推广人数1人</text>
          </view>
          <view class="task-item">
            <text class="task-text">自身下单3个</text>
          </view>
          <view class="task-item">
            <text class="task-text">推广订单金额200元</text>
          </view>
        </view>
      </view>

      <!-- 等级权益 -->
      <view class="section">
        <view class="section-title">
          <image
             :src="IMAGE_URL+'/static/user/dj2.png'"
            style="width: 28rpx; height: 28rpx; margin-right: 6rpx"
          />
          <text>等级权益</text>
        </view>
        <view class="benefit-list">
          <view class="benefit-item">
            <text class="benefit-label">一级分佣比例:10%</text>
          </view>
          <view class="benefit-item">
            <text class="benefit-label">二级分佣比例:4%</text>
          </view>
        </view>
      </view>

      <!-- 确认按钮 -->
      <view class="popup-footer">
        <button class="confirm-btn" @click="handleConfirm">确定</button>
      </view>
    </view>
  </u-popup>
</template>

<script>
import appConfig from '@/config/app.js'
//  IMAGE_URL: appConfig.IMAGE_URL,
export default {
  name: "LevelPopup",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      // 不需要额外的数据
      IMAGE_URL: appConfig.IMAGE_URL,
    };
  },
  methods: {
    // 关闭弹窗
    close() {
      this.$emit("close");
    },

    // 处理提现
    handleWithdraw() {
      this.$emit("withdraw");
      this.close();
    },

    // 确认操作
    handleConfirm() {
      this.$emit("confirm");
      this.close();
    },
  },
};
</script>

<style lang="scss" scoped>
.level-popup {
  width: 640rpx;
  background: #ffffff;
  border-radius: 20rpx;
  box-sizing: border-box;
  overflow: hidden;
  max-height: 80vh;
  overflow-y: auto;
}

.popup-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 28rpx 30rpx 20rpx;
}

.popup-title {
font-weight: 500;
font-size: 32rpx;
color: #333333;
}

.commission-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  margin: 20rpx 30rpx;
  border-radius: 12rpx;
}

.commission-info {
  display: flex;
  flex-direction: column;
}

.commission-label {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.commission-amount {
  font-size: 36rpx;
  color: #e74c3c;
  font-weight: bold;
}

.withdraw-btn {
  background: #1890ff;
  color: #ffffff;
  border: none;
  border-radius: 6rpx;
  padding: 16rpx 30rpx;
  font-size: 26rpx;
  font-weight: 500;

  &::after {
    border: none;
  }

  &:active {
    background: #40a9ff;
  }
}

.section {
  padding: 0 60rpx;
  margin-bottom: 40rpx;
}

.section-title {
  font-size: 28rpx;
  color: #333333;
  display: flex;
  align-items: center;
  margin-bottom: 28rpx;
}

.task-list {
  background: #fffbf4;
  border-radius: 12rpx 12rpx 12rpx 12rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10rpx 0;
}
.benefit-list {
  background: #f3faff;
  border-radius: 12rpx 12rpx 12rpx 12rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
   padding: 10rpx 0;
}

.task-item,
.benefit-item {
}

.task-text {
  font-size: 24rpx;
  color: #333333;
  line-height: 2.5;
}
.benefit-label {
  font-size: 24rpx;
  color: #333333;
  line-height: 2.5;
}

.benefit-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.benefit-value {
  font-size: 28rpx;
  color: #1890ff;
  font-weight: 600;
}

.order-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  background: #f8f9fa;
  margin: 0 30rpx 30rpx;
  border-radius: 8rpx;
}

.order-info {
  display: flex;
  align-items: center;
}

.order-label {
  font-size: 26rpx;
  color: #666;
}

.order-number {
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
}

.order-amount {
  display: flex;
  align-items: center;
}

.amount-text {
  font-size: 28rpx;
  color: #52c41a;
  font-weight: 600;
}

.popup-footer {
  padding: 0 30rpx 30rpx;
  display: flex;
  justify-content: center;
}

.confirm-btn {
  border: none;
  font-size: 32rpx;
  color: #ffffff;
  width: 100%;
  height: 84rpx;
  line-height: 84rpx;

  background: #0785cf;
  box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(7, 133, 207, 0.16);
  border-radius: 100rpx 100rpx 100rpx 100rpx;
  &::after {
    border: none;
  }

  &:active {
    background: #0785cf;
    transform: scale(0.98);
  }
}
</style>
